 <template>
  <div class="mall-wrapper">
    <div class="order-wrap">
      <div class="order-box">
        <div class="info-wrap">
          <ul>
            <li @click="change_list('unuse')">
              <p>
                <span class="title-01">未使用</span>
                <span class="title-02">
                  (
                  <span class="title-03">{{quan_order_info.unuse_count}}</span>
                  )
                </span>
              </p>
            </li>

            <li @click="change_list('used')">
              <p>
                <span class="title-01">已使用</span>
                <span class="title-02">
                  (
                  <span class="title-03">{{quan_order_info.used_count}}</span>
                  )
                </span>
              </p>
            </li>
            <li @click="change_list('guoqi')">
              <p>
                <span class="title-01">已过期</span>
                <span class="title-02">
                  (
                  <span class="title-03">{{quan_order_info.guoqi_count}}</span>
                  )
                </span>
              </p>
            </li>
          </ul>
        </div>

        <div class="item-box" v-for="item in quanorder_list" :key="item.quanorder_id">
          <div class="box-l">
            <div class="img-wrap">
              <img class="ad-img" :src="constant.api_url + item.quan_img">
            </div>
          </div>

          <div class="box-r">
            <p class="title-01">{{item.quan_title}}</p>
            <div class="intergration-box">
              <p class="intergration-txt">
                <span>{{item|desc}}</span>
              </p>
              <p class="intergration-txt">
                <span>有效期限：</span>
                <span>{{item.quan_date | formatDate}}</span>
              </p>
            </div>

            <div class="func-box">
              <button
                class="buy-btn"
                @click="btnquan(item)"
              >{{item.is_used|quan_status(item.quan_date)}}</button>
            </div>
          </div>
        </div>

          <div class="submit-box">
            <button class="submit-btn" @click="quan_order_list">下拉加载更多</button>
          </div>
      </div>
    </div>
  </div>
</template>

 <script type="text/ecmascript-6">
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";
import { formatTime } from "@/utils/index";
import { stat } from "fs";
export default {
  name: "coupon",
  data() {
    return {
      quanorder_list: [],
      constant: constant,
      p: 0,
      quan_order_info: {},
      dialogVisible: false,
      orderitem: {},
      select_quan: 0,
      quan_status:''
    };
  },
  components: {},
  filters: {
    desc(item) {
      if (item["quan_type"] == "manjian") {
        return "满" + item["quan_man"] + "减" + item["quan_jian"];
      } else if (item["quan_type"] == "category") {
        return item["quan_descs"];
      } else {
        return "减" + item["quan_money"];
      }
    },
    formatDate(time) {
      if (time == 0) {
        return "无限期";
      }
      return formatTime(time, "{y}-{m}-{d}");
    },
    quan_status(is_used, quan_date) {
      if (is_used == "0") {
        if (quan_date == "0") {
          return "使用";
        } else {
          var timestamp = Date.parse(new Date()) / 1000;
          if (parseInt(quan_date) > timestamp) {
            return "使用";
          } else {
            return "已到期";
          }
        }
      } else {
        return "已使用";
      }
    }
  },
  methods: {
    btnquan(item) {
      let status = this.$options.filters.quan_status(
        item.is_used,
        item.quan_date
      );
      if (status == "使用") {
        console.log(this.orderitem);
        if (this.orderitem == null) {
          this.$router.push({
            name: "product"
          });
        } else {
          this.select_quan = item.quan_id;
          this.pay(this.orderitem);
          //this.orderitem = {};
        }
      }
    },
    change_list(status) {
      this.p = 0;
      this.quanorder_list = [];
      this.quan_status = status;
      this.quan_order_list();
    },
    quan_order_list(status) {
      this.p++;
      http.get(this, {
        url: "quan/quanorder_list",
        data: {
          pagesize: 2,
          p: this.p,
          token: localStorage.getItem("user_token"),
          status: this.quan_status
        },
        dataType: "json",
        success: function(data) {
          console.log("我的优惠券:", data);
          if (data.status == 1) {
            let info = data.info;
            if (this.p <= info.total_page) {
              this.quanorder_list = this.quanorder_list.concat(info.list);
            }
          }
        }
      });
    },
    quanorder_info() {
      http.get(this, {
        url: "quan/quan_order_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("我的优惠券信息:", data);
          if (data.status == 1) {
            this.quan_order_info = data.info;
          }
        }
      });
    },
    pay(item) {
      let that = this;
      http.post(this, {
        url: "pay/wx_pay",
        data: {
          order_id: item.order_id,
          token: localStorage.getItem("user_token"),
          quan_id: this.select_quan
        },
        dataType: "json",
        success: function(data) {
          console.log(data);
          if (data.status == 1) {
            var args = data.info.wdata;
            wx.ready(function() {
              console.log(args);
              wx.chooseWXPay({
                timestamp: args.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: args.nonceStr, // 支付签名随机串，不长于 32 位
                package: args.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: args.paySign, // 支付签名
                success: function(res) {
                  console.log(res);
                  if (res.errMsg === "chooseWXPay:ok") {
                    window.location.reload();
                  } else {
                    that.$message({
                      message: res.errMsg
                    });
                  }
                },
                cancel: function(res) {
                  console.log(res);
                  that.$message({
                    message: "已取消支付"
                  });
                },
                fail: function(res) {
                  console.log(res);
                  that.$message({
                    message: "购买失败，请重新支付",
                    type: "error"
                  });
                }
              });
            });
          } else {
            that.$message({
              message: data.info,
              type: "error"
            });
          }
        }
      });
    }
  },
  created() {},
  activated() {
    this.quan_order_list();
    this.quanorder_info();
    let order_id = this.$route.query.order_id;
    http.get(this, {
      url: "order/order_detail",
      data: {
        order_id: order_id,
        token: localStorage.getItem("user_token")
      },
      dataType: "json",
      success: function(data) {
        console.log("订单详情:", data);
        if (data.status == 1) {
          this.orderitem = data.info;
        } else {
          this.$message.error(data.info);
        }
      }
    });
  }
};
</script>

 <style scoped lang="scss">
.mall-wrapper {
}

.order-wrap {
  .order-box {
    .info-wrap {
      width: 100%;
      margin-bottom: 0.02rem;
      background-color: $c-gray-dark;
      padding: 0 0.46rem;

      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        $letHeight: 0.6rem;

        li {
          width: 1.88rem;
          text-align: center;
          line-height: $letHeight;

          &:last-child {
          }

          p {
            font-size: 0.32rem;
            color: $c-mainC;

            * {
              line-height: $letHeight;
              display: inline-block;
            }
            .title-01 {
            }
            .title-02 {
              .title-03 {
              }
            }
          }
        }
      }
    }

    .item-box {
      padding: 0.35rem 0.3rem;
      @extend .cmm-clearfix;
      $letHeight: 3.18rem;
      height: $letHeight;
      border-top: 0.02rem solid $c-gray-dark;

      &:first-child {
        border-top: none;
      }

      .box-l {
        width: 3.4rem;
        float: left;

        .img-wrap {
          width: 100%;
          $letHeight: 2.5rem;
          height: $letHeight;
          overflow: hidden;
          position: relative;
          border-radius: 0.2rem;

          .ad-img {
            @extend .cmm-translateXY;
            height: 100%;
          }
        }
      }

      .box-r {
        float: left;
        width: 3.45rem;
        padding-left: 0.38rem;

        .title-01 {
          font-size: 0.32rem;
          color: $c-mainC;
          overflow: hidden;
          padding: 0.14rem 0;
          @extend .cmm-txtOverflow;
          font-weight: bold;
        }

        .intergration-box {
          $letHeight: 0.43rem;
          margin-top: 0.1rem;
          .intergration-txt {
            width: 100%;
            text-align: left;
            font-size: 0.32rem;
            color: $c-themeC;
            line-height: $letHeight;

            span {
              &:first-child {
                font-weight: bold;
                color: $c-mainC;
              }

              &:last-child {
                color: $c-gray-dark;
                margin-top: 0.1rem;
                font-weight: bold;
              }
            }
          }

          span {
            display: block;
            line-height: $letHeight;
          }

          .icon {
            font-size: 0.4rem;
            margin-right: 0rem;
          }
        }

        .func-box {
          $letHeight: 0.6rem;
          margin-top: 0.12rem;

          .buy-btn {
            width: 100%;
            display: inline-block;
            float: right;
            border-radius: 0.8rem;
            background-color: $c-themeBg;
            font-size: 0.36rem;
            font-weight: normal;
            color: $c-white-light;
            height: $letHeight;
            line-height: $letHeight;
            text-align: center;
              font-family: 'SimSun';
          }
        }
      }
    }
  }
}
</style>
